import React, { useState, useEffect } from "react";
import { Form, Select, Input, TimePicker, Radio, Row, Col, Button } from 'antd';
const { Option } = Select;
import { LoadingOutlined, PlusOutlined, CloseCircleOutlined } from '@ant-design/icons';

import DetailDes from './DetailDesView';

function AddScene({ prop, onChange }) {
    let [ data, setData ] = useState([]);

    let add = () => {
        setData(data.concat({
            children_scenic_name: "",
            children_scenic_active_time: "",
            children_has_description: "",
            children_description: "",
            description_image: { image_one: '', image_two: '', image_tree: '', img_four: '' }
        }));
    };
    let close = (index) => {
        data.splice(index, 1);
        setData([ ...data ]);
    };

    let getDetail = (i, v) => {
        let { hasDetailDesc, detailDesc, imgs: { imgOne, imgTwo, imgThree, imgFour } } = v;
        data[i] = {
            ...data[i],
            children_has_description: hasDetailDesc,
            children_description: detailDesc,
            description_image: { image_one: imgOne, image_two: imgTwo, image_tree: imgThree, img_four: imgFour }
        };
        setData([ ...data ]);
    };

    let changeHandler = (item, k, v) => {
        item[k] = v.target.value;
        setData([ ...data ]);
    };
    return (
        <div>
            {
                data.map((item, i) => (
                    <div key={i} className="add-scene-area-box">
                        <Form.Item
                            label="景点名称"
                            labelCol={{ span: 4 }}
                        >
                            <Input value={item.children_scenic_name} onChange={(v) => changeHandler(item, 'children_scenic_name', v)} />
                        </Form.Item>
                        <Form.Item
                            label="活动时间"
                            labelCol={{ span: 4 }}
                        >
                            <TimePicker format={'HH:mm'} value={item.children_scenic_active_time} onChange={(v) => changeHandler(item, 'children_scenic_active_time', v)} />
                        </Form.Item>
                        <DetailDes onChange={(v) => getDetail(i, v)}/>
                        <span className="close-btn" onClick={() => close(i)}><CloseCircleOutlined style={{ fontSize: '22px' }} /></span>
                    </div>
                ))
            }
            <span className="add-scene-btn"><Button type="link" block onClick={add}>+增加景点</Button></span>
        </div>
    );
}


export default AddScene;